package cn.aihongbo.kmp.pages.home

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults
import androidx.compose.material.Divider
import androidx.compose.material.ModalBottomSheetState
import androidx.compose.material.Tab
import androidx.compose.material.TabRow
import androidx.compose.material.TabRowDefaults
import androidx.compose.material.TabRowDefaults.tabIndicatorOffset
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import cn.aihongbo.kmp.data.vm.HomeViewModel
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch
import org.jetbrains.compose.ui.tooling.preview.Preview

@Preview
@Composable
fun HomeOrderEnterView(
    viewModel: HomeViewModel,
    scope: CoroutineScope,
    sheetState: ModalBottomSheetState
) {
    var selectIndex by remember { mutableStateOf(0) }
    Column(
        modifier = Modifier.padding(
            start = 16.dp, end = 16.dp, top = 280.dp
        ).background(Color.White, shape = RoundedCornerShape(8.dp))
    ) {
        TabRow(
            modifier = Modifier.padding(12.dp).fillMaxWidth().height(35.dp)
                .background(Color(0xffe7f1ff), shape = RoundedCornerShape(6.dp)).padding(3.dp),
            selectedTabIndex = selectIndex,
            backgroundColor = Color.Transparent,
            divider = {},
            indicator = { positions ->
                TabRowDefaults.Indicator(
                    Modifier.tabIndicatorOffset(positions[selectIndex]),
                    color = Color.Transparent,
                    height = 0.dp
                )
            }) {

            Tab(
                selectIndex == 0,
                selectedContentColor = Color(0xff3e3e3e),
                unselectedContentColor = Color(0xffcad3de),
                interactionSource = MutableInteractionSource(),
                onClick = {
                    selectIndex = 0
                },
                text = {
                    Text("海外包车")
                },
                modifier = Modifier.background(
                    if (selectIndex == 0) Color(0xfffefefe) else Color.Transparent,
                    shape = RoundedCornerShape(6.dp)
                )
            )
            Tab(
                selectIndex == 1,
                selectedContentColor = Color(0xff3e3e3e),
                unselectedContentColor = Color(0xffcad3de),
                onClick = {
                    selectIndex = 1
                },
                text = {
                    Text("国内包车")
                },
                modifier = Modifier.background(
                    if (selectIndex == 1) Color(0xfffefefe) else Color.Transparent,
                    shape = RoundedCornerShape(6.dp)
                )
            )
            Tab(
                selectIndex == 2,
                selectedContentColor = Color(0xff3e3e3e),
                unselectedContentColor = Color(0xffcad3de),
                onClick = {
                    selectIndex = 2
                },
                text = {
                    Text("定制旅行")
                },
                modifier = Modifier.background(
                    if (selectIndex == 2) Color(0xfffefefe) else Color.Transparent,
                    shape = RoundedCornerShape(6.dp)
                )
            )
        }

        Box(
            modifier = Modifier.padding(
                top = 16.dp, start = 16.dp, end = 16.dp, bottom = 16.dp
            ).fillMaxWidth()
        ) {
            when (selectIndex) {
                0 -> EnterWai(viewModel, scope, sheetState)
                1 -> EnterNei()
                2 -> EnterDing()
            }
        }
    }
}

@Composable
fun EnterWai(viewModel: HomeViewModel, scope: CoroutineScope, sheetState: ModalBottomSheetState) {
    Column(modifier = Modifier.fillMaxWidth()) {
        Row {
            Column(modifier = Modifier.width(60.dp)) {
                Text("用车地", fontSize = 12.sp, color = Color(0xffe1e1e1), modifier = Modifier)
                Text(viewModel.selectedCity.value?.cityName ?: "", Modifier.clickable {
                    scope.launch {
                        sheetState.show()
                    }
                }, maxLines = 1, overflow = TextOverflow.Ellipsis)
            }
            Divider(
                modifier = Modifier.align(Alignment.Bottom)
                    .padding(top = 20.dp, start = 12.dp, end = 12.dp).width(1.dp).height(20.dp)
                    .background(Color(0x03FEFEFE))
            )

            Column {
                Text("接送您的位置", fontSize = 12.sp, color = Color(0xffe1e1e1))
                Text("位置/酒店/具体地址")
            }
        }

        Divider(modifier = Modifier.padding(vertical = 8.dp).background(Color(0x01FEFEFE)))

        Row {
            Column {
                Text("开始时间", fontSize = 12.sp, color = Color(0xffe1e1e1))
                Text("06月05日 09:00 (周四)")
            }
        }

        Button(
            onClick = {

            },
            Modifier.padding(top = 16.dp).fillMaxWidth()
                .background(Color(0xFFFE5830), shape = RoundedCornerShape(8.dp)),
            colors = ButtonDefaults.buttonColors(
                contentColor = Color.Transparent,
                backgroundColor = Color.Transparent,
                disabledBackgroundColor = Color.Transparent,
                disabledContentColor = Color.Transparent
            ),
            elevation = ButtonDefaults.elevation(0.dp)
        ) {
            Text(
                "预定",
                color = Color.White,
                fontSize = 18.sp,
            )
        }

        Text(
            "新东方集团投资 * 累计1.2亿用户 * 十年全球包车品牌",
            fontSize = 12.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth().padding(top = 12.dp)
        )
    }

}

@Composable
fun EnterNei() {
    Column(modifier = Modifier.fillMaxWidth()) {
        Row {
            Column(modifier = Modifier.width(60.dp)) {
                Text("用车地", fontSize = 12.sp, color = Color(0xffe1e1e1), modifier = Modifier)
                Text("香港")
            }
            Divider(
                modifier = Modifier.align(Alignment.Bottom)
                    .padding(top = 20.dp, start = 12.dp, end = 12.dp).width(1.dp).height(20.dp)
                    .background(Color(0x03FEFEFE))
            )

            Column {
                Text("接送您的位置", fontSize = 12.sp, color = Color(0xffe1e1e1))
                Text("位置/酒店/具体地址")
            }
        }

        Divider(modifier = Modifier.padding(vertical = 8.dp).background(Color(0x01FEFEFE)))

        Row {
            Column {
                Text("开始时间", fontSize = 12.sp, color = Color(0xffe1e1e1))
                Text("06月05日 09:00 (周四)")
            }
        }

        Button(
            onClick = {

            },
            Modifier.padding(top = 16.dp).fillMaxWidth()
                .background(Color(0xFFFE5830), shape = RoundedCornerShape(8.dp)),
            colors = ButtonDefaults.buttonColors(
                contentColor = Color.Transparent,
                backgroundColor = Color.Transparent,
                disabledBackgroundColor = Color.Transparent,
                disabledContentColor = Color.Transparent
            ),
            elevation = ButtonDefaults.elevation(0.dp)
        ) {
            Text(
                "预定",
                color = Color.White,
                fontSize = 18.sp,
            )
        }

        Text(
            "新东方集团投资 * 累计1.2亿用户 * 十年全球包车品牌",
            fontSize = 12.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.fillMaxWidth().padding(top = 12.dp)
        )
    }
}

@Composable
fun EnterDing() {
    Column(modifier = Modifier.fillMaxWidth()) {
        Row {
            Column(modifier = Modifier.fillMaxWidth()) {
                Text(
                    "您想去哪里？", fontSize = 12.sp, color = Color(0xffe1e1e1), modifier = Modifier
                )
                Text("东京")
            }
        }

        Divider(modifier = Modifier.padding(vertical = 8.dp).background(Color(0x01FEFEFE)))

        Button(
            onClick = {

            },
            Modifier.padding(top = 16.dp).fillMaxWidth()
                .background(Color(0xFFFE5830), shape = RoundedCornerShape(8.dp)),
            colors = ButtonDefaults.buttonColors(
                contentColor = Color.Transparent,
                backgroundColor = Color.Transparent,
                disabledBackgroundColor = Color.Transparent,
                disabledContentColor = Color.Transparent
            ),
            elevation = ButtonDefaults.elevation(0.dp)
        ) {
            Text(
                "定制师免费规划行程",
                color = Color.White,
                fontSize = 18.sp,
            )
        }

    }
}